/**
* 专升本信息管理 数据可视化
*/
<template>
	<!-- 组件主盒子 -->
	<div class="stbox">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" class="bar-font">
			<el-breadcrumb-item>专升本信息管理</el-breadcrumb-item>
			<el-breadcrumb-item>数据可视化</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="main-header">
			<div class="main-count-item">
				<div class="main-count-icon"><i class="el-icon-user"></i></div>
				<div class="main-count-countent">
					<div class="main-count-title">学生总数</div>
					<div class="main-count-number">{{studentTotal}}</div>
				</div>
			</div>
			<div class="main-count-item">
				<div class="main-count-icon"><i class="el-icon-news"></i></div>
				<div class="main-count-countent">
					<div class="main-count-title">申请专升本人数</div>
					<div class="main-count-number">{{applyTotal}}</div>
				</div>
			</div>
			<div class="main-count-item">
				<div class="main-count-icon"><i class="el-icon-circle-check"></i></div>
				<div class="main-count-countent">
					<div class="main-count-title">通过人数</div>
					<div class="main-count-number">{{passTotal}}</div>
				</div>
			</div>
			<div class="main-count-item">
				<div class="main-count-icon"><i class="el-icon-warning-outline"></i></div>
				<div class="main-count-countent">
					<div class="main-count-title">未审核人数</div>
					<div class="main-count-number">{{auditTotal}}</div>
				</div>
			</div>
		</div>
		<!-- 统计图 -->
		<div>
			<el-row :gutter="23">
				<el-col :span="12" class="text-c">
					<div class="paybox">
						<div class="cavasbox" ref="applyEchart"></div>
					</div>
				</el-col>
				<el-col :span="12" class="text-c">
					<div class="paybox">
						<div class="cavasbox" ref="classApplyNumEchart"></div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script type="text/ecmascript-6">
	import Chart from 'echarts';
	import {
		getMainData,
		getClassApplyCountForPie
	} from '@/api/getData'
	export default {
		name: "welcome",
		data() {
			return {
				machineNo: '',
				type: 'day',
				studentTotal: 123,
				applyTotal: 3245,
				passTotal: 1423,
				failTotal: 533,
				auditTotal: 632,
				//  专升本上岸人数统计
				applyoption: {
					backgroundColor: '#ffffff',
					title: {
						text: '专升本上岸人数',
						left: 10,
						top: 5,
						textStyle: {
							fontSize: 12,
							color: '#ccc'
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},

					visualMap: {
						show: false,
						min: 0,
						max: 190,
						inRange: {
							colorLightness: [0, 1]
						}
					},
					series: [{
						name: '专升本资格人数统计 ',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: [{
								value: 335,
								name: '符合人数'
							},
							{
								value: 310,
								name: '不符合人数'
							},
							{
								value: 200,
								name: '未审核人数'
							}
						].sort(function(a, b) {
							return a.value - b.value;
						}),
						roseType: 'radius',
						label: {
							normal: {
								textStyle: {
									color: 'rgba(255, 255, 255, 0.3)'
								}
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: 'rgba(255, 255, 255, 0.3)'
								},
								smooth: 0.2,
								length: 10,
								length2: 20
							}
						},
						itemStyle: {
							normal: {
								color: '#516587',
								shadowBlur: 200,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},

						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function(idx) {
							return Math.random() * 200;
						}
					}]
				},
				classApplyNumoption: {
					backgroundColor: '#ffffff',
					title: {
						text: '各专业申请专升本人数',
						left: 10,
						top: 5,
						textStyle: {
							fontSize: 12,
							color: '#ccc'
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},

					visualMap: {
						show: false,
						min: 0,
						max: 120,
						inRange: {
							colorLightness: [0, 1]
						}
					},
					series: [{
						name: '各专业申请专升本人数',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: [{
								value: 335,
								name: '网络工程'
							},
							{
								value: 310,
								name: '软件工程（普通）'
							},
							{
								value: 274,
								name: '软件工程（中外合作办学）'
							},
						].sort(function(a, b) {
							return a.value - b.value;
						}),
						roseType: 'radius',
						label: {
							normal: {
								textStyle: {
									color: 'rgba(255, 255, 255, 0.3)'
								}
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: 'rgba(255, 255, 255, 0.3)'
								},
								smooth: 0.2,
								length: 10,
								length2: 20
							}
						},
						itemStyle: {
							normal: {
								color: '#516587',
								shadowBlur: 200,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},

						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function(idx) {
							return Math.random() * 200;
						}
					}]
				},
			}
		},
		// 创建完毕状态(里面是操作)
		created() {

		},
		// 挂载结束状态(里面是操作)
		mounted() {
			this.$nextTick(function() {
				console.log(this.studentTotal)
				this.getAuditData()
				console.log(this.studentTotal)
				this.getpay()
				this.getpayNum()
			})

		},
		// 里面的函数只有调用才会执行
		methods: {
			getAuditData() {
				getMainData().then(res => {
					if (res != -1) {
						console.log(res);
						this.studentTotal = res.datas.studentTotal
						this.applyTotal = res.datas.applyTotal
						this.passTotal = res.datas.passTotal
						this.auditTotal = res.datas.auditTotal
						this.failTotal = res.datas.failTotal
					} else {
						this.$message({
							type: 'error',
							message: '数据加载失败！'
						})
					}
				})
			},
			// 专升本上岸人数
			getpay() {
				// console.log(this.passTotal)
				getMainData().then(res => {
					if (res != -1) {
						console.log(res);
						this.applyoption.series[0].data[0].value = res.datas.auditTotal
						this.applyoption.series[0].data[2].value = res.datas.passTotal
						this.applyoption.series[0].data[1].value = res.datas.failTotal
						this.chart = Chart.init(this.$refs.applyEchart)
						this.chart.setOption(this.applyoption)
					} else {
						this.$message({
							type: 'error',
							message: '数据加载失败！'
						})
					}
				})

			},
			// 各班申请专升本人数统计
			getpayNum() {
				getClassApplyCountForPie().then(res => {
					if (res != -1) {
						console.log(res);
						// console.log(this.classApplyNumoption.series[0])
						this.classApplyNumoption.series[0].data = res.datas
						this.chart = Chart.init(this.$refs.classApplyNumEchart)
						this.chart.setOption(this.classApplyNumoption)
					} else {
						this.$message({
							type: 'error',
							message: '数据加载失败！'
						})
					}
				})
			}

		}
	};
</script>
<style>
	.cavasbox {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.paybox {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 20px;
		height: 32vh;
	}

	.bar-font {
		font-weight: 900;
	}

	.main-header {
		margin-top: 50px;
		margin-bottom: 50px;
		display: flex;
		justify-content: space-between;
	}

	.main-count-item {
		display: flex;
		justify-content: space-between;
		width: 20%;
		background-color: white;
		height: 100px;
		padding: 10px;
		align-items: center;
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgb(212, 214, 216);
	}

	.main-count-icon {
		font-size: 50px;
		color: rgb(51,65,87);
		width: 90px;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 5px;
		transition: all 0.5s;
	}

	.main-count-icon:hover {
		color: white;
		background-color: rgb(93,115,153);

	}

	.main-count-countent {
		margin-right: 5px;
	}

	.main-count-title {
		color: rgb(139, 139, 139);
		font-size: 18px;
		font-weight: bolder;
	}

	.main-count-number {
		margin-top: 15px;
		color: rgb(102, 102, 102);
		font-size: 18px;
		font-weight: bolder;
	}

	.main-card {
		margin-top: 50px;
		display: flex;
		justify-content: space-between;
	}

	.box-card {
		width: 32%;
		height: 550px;
	}

	.echarts-dom {
		width: 95%;
		height: 500px;
	}
</style>
